<template>
  <view class="page-container">
    <GlobalTopBar
      ref="topBarRef"
      class="topbars fixed"
      :isLeft="true"
      color="#fff"
    >
      <template #title><text style="color: #fff">我的佣金</text></template>
    </GlobalTopBar>
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <!-- 顶部蓝色 -->
    <view class="topblue">
      <image :src="`${store.imgDomain}master_tj_1.png`" mode="scaleToFill" />
    </view>
    <!-- 内容 -->
    <view class="page_content">
      <view class="centers">
        <view class="t1">总资产（元）</view>
        <view class="t2">200.00</view>
        <view class="btns">去提现</view>
        <view class="t3 flex_center border_b">
          <image
            class="ts_img"
            :src="`${store.imgDomain}porder_3.png`"
            mode="scaleToFill"
          />
          <text> 单次提现金额不可低于50元</text>
        </view>
        <!-- 累计金额 -->
        <view class="lj_je">
          <view class="je left flex_center">
            <view class="lj_je_t1">累计提现成功（元）</view>
            <view class="lj_je_t2">100</view>
          </view>
          <view class="je right flex_center">
            <view class="lj_je_t1">入账审核中（元）</view>
            <view class="lj_je_t2">100</view>
          </view>
        </view>
      </view>
      <!-- 记录 -->
      <view class="ulbox">
        <view class="toptab">
          <view class="tabbox">
            <view :class="{ ac: isTrue }">入账记录</view>
          </view>
          <view class="tabbox">
            <view :class="{ ac: !isTrue }">提现记录</view>
          </view>
        </view>
        <scroll-view
          class="scroll-Y"
          scroll-y
          refresher-enabled
          :refresher-triggered="isRefreshing"
          @refresherrefresh="handleRefresh"
          @scrolltolower="handleLoadMore"
          refresher-background="#f5f5f5"
          refresher-threshold="80"
        >
          <view class="libox border_b flex">
            <view class="v1"
              ><text style="font-size: 30rpx">客户下单</text
              ><text class="v1_t1">2025-10-10 14:42:10</text></view
            >
            <view class="v2">+20.00</view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 我的佣金 -->
    <view class="fixeds flex_center">
      <view class="centerbox">
        <image
          class="close_img"
          :src="`${store.imgDomain}close.png`"
          mode="scaleToFill"
        />
        <view class="title"> 提现申请 </view>
        <view class="t1">提现金额</view>
        <input class="tx_inp border_b" type="number" />
        <!-- 提交 -->
        <view class="btnbox">
          <view class="qx">取消</view>
          <view class="tj">提交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/store';
import tabBar from '@/components/tabBar.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';

const title = ref('我的');
const isTrue = ref(false);
const store = useCounterStore();
const couponQuantity = ref(0);
// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const workerData = ref({});

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  // getUserBalanceLogListByRechargeCard(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  // getUserBalanceLogListByRechargeCard();
};

// onShow(() => {
//   getUserCouponCount();
// });
// onLoad(() => {
//   getWorkerByOpenId();
// });
</script>

<style scoped lang="scss">
.page-container {
  color: #fff;
  background-color: #f8f8f8;
}
.topblue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  image {
    width: 750rpx;
    height: 319rpx;
  }
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.page_content {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  color: #333;
  .centers {
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #71cdc4;
    .t1 {
      text-align: center;
      font-size: 30rpx;
    }
    .t2 {
      text-align: center;
      font-size: 60rpx;
      margin: 30rpx;
      font-weight: 700;
    }
    .btns {
      width: max-content;
      font-size: 36rpx;
      color: #fff;
      background: linear-gradient(to bottom, #ff7f16, #ff4816);
      line-height: 80rpx;
      border-radius: 40rpx;
      padding: 0 144rpx;
      margin: 0 auto 23rpx;
    }

    .ts_img {
      width: 28rpx;
      height: 28rpx;
      margin-right: 20rpx;
    }
    .t3 {
      padding-bottom: 23rpx;

      text {
        color: $uni-text-color-grey;
      }
    }
    .lj_je {
      padding-top: 30rpx;
      position: relative;
      display: flex;
      height: 80rpx;
      .je {
        flex: 1;
        flex-direction: column;
        .lj_je_t1 {
          color: $uni-text-color-grey;
        }
        .lj_je_t2 {
          font-size: 30rpx;
          font-weight: 700;
        }
      }
      &::after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1rpx;
        height: 80rpx;
        background-color: #d6d6d6;
      }
    }
  }
}
.hybox {
  border-radius: 15rpx;
  background-color: #fff;
  font-size: 24rpx;
  box-sizing: border-box;
  padding: 20rpx 35rpx;
  display: flex;
  align-items: center;
  display: flex;
  margin: 10rpx 0;
  .audio_img {
    margin-right: 10rpx;
    width: 34rpx;
    height: 31rpx;
  }
}
.hybtn {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #315dd8;
  padding-left: 20rpx;
  background-color: #cfe9ff;
  border-radius: 17rpx;
  line-height: 34rpx;
}
.hyicon {
  width: 33rpx;
  height: 30rpx;
  margin-right: 15rpx;
}
.hyname {
  font-size: 30rpx;
  color: #ffc66e;
}
.line {
  height: 26rpx;
  width: 1rpx;
  background-color: #fff;
  margin: 0 20rpx;
}
.times {
  color: #fff;
  font-size: 24rpx;
}
.ckqb {
  color: $uni-text-color-grey;
}
.srbox {
  padding: 30rpx 0;
  background-color: #fff;
  border: 1rpx solid #71cdc4;
  border-radius: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .srbox_item {
    width: 33%;
    flex-direction: column;
    .t1 {
      font-size: 36rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }
    .t2 {
      color: $uni-text-color-grey;
    }
  }
}
.btext {
  position: relative;
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  &::after {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    left: 140rpx;
    transform: translateY(-50%);
    background-color: #93dad3;
  }
  &::before {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    right: 140rpx;
    transform: translateY(-50%);
    background-color: #93dad3;
  }
  image {
    position: relative;
    display: block;
    opacity: 0.6;
    width: 185rpx;
    height: 38rpx;
  }
}
.ulbox {
  margin-top: 20rpx;
  padding: 30rpx;
  text-align: center;
  position: relative;
  z-index: 1;
  border: 1px solid #93dad3;
  border-radius: 20rpx;
  background-color: #fff;
  .toptab {
    display: flex;
    margin-bottom: 30rpx;
    .tabbox {
      flex: 1;
      display: flex;
      justify-content: center;
      view {
        width: max-content;
        color: #1e1e1e;
        font-size: 30rpx;
        position: relative;
        &.ac {
          &::after {
            content: ' ';
            position: absolute;
            bottom: -13rpx;
            left: 50%;
            transform: translate(-50%);
            width: 100%;
            height: 4rpx;
            background-color: #1bb9a6;
          }
        }
      }
    }
  }
  .libox {
    box-sizing: border-box;
    padding: 20rpx 0;
    justify-content: space-between;
    view {
      display: flex;
      flex-direction: column;
    }
    .v1 {
      text-align: left;
    }

    .v2 {
      font-size: 30rpx;
      color: #ff6600;
    }
  }
}
.scroll-Y {
  max-height: 30vh;
}
.fixeds {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  color: #000;
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  .centerbox {
    position: relative;
    background-color: #fff;
    width: 80%;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 30rpx;
    .title {
      text-align: center;
      font-size: 36rpx;
    }
    .tx_inp {
      margin-top: 20rpx;
    }
  }
}
.btnbox {
  margin-top: 100rpx;
  display: flex;
  justify-content: center;
  view {
    line-height: 46rpx;
    border-radius: 23rpx;
    padding: 0 50rpx;
  }
  .qx {
    color: #14c7b6;
    border: 1rpx solid #14c7b6;
  }
  .tj {
    margin-left: 20rpx;
    color: #fff;
    background-color: #15c9b7;
    border: 1rpx solid #15c9b7;
  }
}
.close_img {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 62rpx;
  height: 62rpx;
}
</style>
